<template>
  <div class="repair-index">
    <van-nav-bar 
      :title="$t('repair.submit.title')" 
      left-arrow
      @click-left="$router.back()"
    >
      <template #right>
        <van-icon name="question-o" size="20" @click="showHelp" />
      </template>
    </van-nav-bar>
    
    <!-- 顶部统计卡片 -->
    <div class="stats-banner">
      <div class="stats-item">
        <div class="stats-value">{{ recentOrders.length }}</div>
        <div class="stats-label">进行中</div>
      </div>
      <div class="stats-divider"></div>
      <div class="stats-item">
        <div class="stats-value">免费</div>
        <div class="stats-label">检测服务</div>
      </div>
      <div class="stats-divider"></div>
      <div class="stats-item">
        <div class="stats-value">24h</div>
        <div class="stats-label">快速响应</div>
      </div>
    </div>
    
    <!-- 快捷入口 -->
    <div class="quick-actions">
      <div class="action-card primary" @click="goSubmit">
        <div class="action-icon">
          <van-icon name="add-o" size="28" />
        </div>
        <div class="action-content">
          <div class="action-title">{{ $t('repair.submit.title') }}</div>
          <div class="action-desc">快速提交维修申请</div>
        </div>
        <van-icon name="arrow" class="action-arrow" />
      </div>
      
      <div class="action-row">
        <div class="action-card-small" @click="goMyOrders">
          <van-icon name="orders-o" size="24" color="#07c160" />
          <div class="action-title-small">{{ $t('repair.myOrders.title') }}</div>
        </div>
        
        <div class="action-card-small" @click="goServiceCenters">
          <van-icon name="location-o" size="24" color="#ff976a" />
          <div class="action-title-small">{{ $t('repair.serviceCenters.title') }}</div>
        </div>
      </div>
    </div>
    
    <!-- 最近工单 -->
    <div v-if="recentOrders.length > 0" class="recent-orders">
      <div class="section-header">
        <div class="section-title">最近工单</div>
        <van-button type="primary" size="small" plain @click="goMyOrders">
          查看全部
        </van-button>
      </div>
      
      <OrderCard
        v-for="order in recentOrders"
        :key="order.id"
        :order="order"
        :show-actions="false"
        @click="handleViewDetail(order)"
      />
    </div>
    
    <!-- 服务说明 -->
    <div class="service-info">
      <div class="section-header">
        <div class="section-title">服务说明</div>
      </div>
      <div class="info-grid">
        <div class="info-card">
          <div class="info-icon success">
            <van-icon name="passed" size="20" />
          </div>
          <div class="info-label">免费检测</div>
          <div class="info-desc">所有设备均可免费检测</div>
        </div>
        
        <div class="info-card">
          <div class="info-icon primary">
            <van-icon name="clock-o" size="20" />
          </div>
          <div class="info-label">快速响应</div>
          <div class="info-desc">24小时内响应处理</div>
        </div>
        
        <div class="info-card">
          <div class="info-icon warning">
            <van-icon name="friends-o" size="20" />
          </div>
          <div class="info-label">专业团队</div>
          <div class="info-desc">经验丰富的维修工程师</div>
        </div>
        
        <div class="info-card">
          <div class="info-icon danger">
            <van-icon name="shield-o" size="20" />
          </div>
          <div class="info-label">质量保证</div>
          <div class="info-desc">维修后提供质保服务</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { getMyRepairOrders } from '@/api/repair'
import OrderCard from './components/OrderCard.vue'

const router = useRouter()
const { t } = useI18n()

const recentOrders = ref([])

// 获取最近工单
const getRecentOrders = async () => {
  try {
    const res = await getMyRepairOrders({
      pageNum: 1,
      pageSize: 3
    })
    recentOrders.value = res.data.rows
  } catch (error) {
    console.error('获取最近工单失败:', error)
  }
}

// 去提交工单
const goSubmit = () => {
  router.push('/repair/submit')
}

// 去我的工单
const goMyOrders = () => {
  router.push('/repair/my-orders')
}

// 去服务中心
const goServiceCenters = () => {
  router.push('/repair/service-centers')
}

// 查看详情
const handleViewDetail = (order) => {
  router.push(`/repair/track/${order.caseNo}`)
}

// 显示帮助
const showHelp = () => {
  // TODO: 显示帮助信息
}

onMounted(() => {
  getRecentOrders()
})
</script>

<style scoped lang="scss">
.repair-index {
  min-height: 100vh;
  background: linear-gradient(180deg, #f0f9ff 0%, #f7f8fa 100%);
  padding-bottom: 20px;
}

// 统计横幅
.stats-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin: 16px;
  padding: 20px;
  border-radius: 16px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.stats-item {
  flex: 1;
  text-align: center;
  color: #fff;
}

.stats-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stats-label {
  font-size: 12px;
  opacity: 0.9;
}

.stats-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.3);
}

// 快捷入口
.quick-actions {
  padding: 0 16px 16px;
}

.action-card.primary {
  background: linear-gradient(135deg, #1989fa 0%, #0e6fd6 100%);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(25, 137, 250, 0.3);
  margin-bottom: 12px;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(25, 137, 250, 0.3);
  }
}

.action-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.action-content {
  flex: 1;
}

.action-title {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 4px;
}

.action-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.action-arrow {
  color: #fff;
  font-size: 16px;
}

.action-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.action-card-small {
  background: #fff;
  border-radius: 12px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  
  &:active {
    transform: translateY(2px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  }
}

.action-title-small {
  font-size: 14px;
  color: #323233;
  font-weight: 500;
}

// 最近工单
.recent-orders {
  padding: 0 16px;
  margin-bottom: 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-title {
  font-size: 17px;
  font-weight: 600;
  color: #323233;
  position: relative;
  padding-left: 12px;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
  }
}

// 服务说明
.service-info {
  padding: 0 16px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.info-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s;
  
  &:active {
    transform: translateY(2px);
  }
}

.info-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  
  &.success {
    background: linear-gradient(135deg, #07c160 0%, #05a050 100%);
    color: #fff;
  }
  
  &.primary {
    background: linear-gradient(135deg, #1989fa 0%, #0e6fd6 100%);
    color: #fff;
  }
  
  &.warning {
    background: linear-gradient(135deg, #ff976a 0%, #ff7544 100%);
    color: #fff;
  }
  
  &.danger {
    background: linear-gradient(135deg, #ee0a24 0%, #d00a1f 100%);
    color: #fff;
  }
}

.info-label {
  font-size: 14px;
  font-weight: 500;
  color: #323233;
  margin-bottom: 4px;
}

.info-desc {
  font-size: 12px;
  color: #969799;
  line-height: 1.4;
}
</style>

